<template>
    <div class="login">
      <el-dialog
        title="登录"
        :visible.sync="loginMask"
        width="30%"
        >
        <el-input v-model="username" placeholder="请输入账号"></el-input>
        <el-input v-model="password" placeholder="请输入密码" style="margin-top:16px"></el-input>
        <div class="captcha">
            <el-input placeholder="请输入结果" class="captchaInput" v-model="svgCaptcha"></el-input>
            <span v-if="getSvgCaptcha" class="getSvgCaptcha"  v-html="getSvgCaptcha.data"  @click="captcha"></span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="loginMask = false">取 消</el-button>
          <el-button type="primary" @click="loginSure">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<style scoped>
   .captcha{
       display:flex;
       margin-top:5px;
   }
   .getSvgCaptcha{
       cursor:pointer;
   }
   .captchaInput{
       position: relative;
       top:10px;
   } 
 
</style>
<script>
  export default {
    data() {
      return {
        username: "",
        password: "",
        svgCaptcha: ""
      };
    },
    computed: {
        loginMask: {
          get: function () {
            return this.$store.state.mutations.loginMask
          },
          set: function () {
            return this.$store.state.mutations.loginMask = false; 
          }    
        },
        getSvgCaptcha() {
          return this.$store.state.mutations.getSvgCaptcha.getSvgCaptcha
        }
    },
    methods: {
       captcha() {
           this.$http({
                method: "get", 
                url: this.url +'/getSvgCaptcha'
            })
            .then(res => {
                    this.$store.commit("login", {
                    loginMask: true,
                    getSvgCaptcha: res.data.result
                });   
		   })  
       },
       loginSure(){
          let username = this.username,
              password = this.password;
          if(!username || !password || !this.svgCaptcha){
              this.$message({
                  message: '账号或者密码不能为空',
                  type: 'error'
              });  
          }else{  
              if(this.svgCaptcha != this.getSvgCaptcha.text){
                this.$message({
                  message: '计算结果错误',
                  type: 'error'
                 }); 
                 return;     
              }
              this.$http({
                  method: "post", 
                  url: this.url +'/articles/login',
                  data:{
                      username:username,
                      password:password
                  }
              })
               .then(res => {
                  if(res.data.code == 200){
                      if(res.data.msg == "用户不存在"){
                          this.$message({
                            message: '用户不存在',
                            type: 'error'
                          }); 
                      }else if(res.data.msg == "密码不正确"){
                            this.$message({
                                message: '密码不正确',
                                type: 'error'
                            }); 
                      }else{
                          this.$message({
                              message: '登录成功',
                              type: 'success'
                          }); 

                          localStorage.setItem("user",this.username)

                          this.loginMask = false
                      }
                    }else{
                        this.$message({
                            message: '服务器异常',
                            type: 'error'
                        });
                    }
                })
            }
       }
    }
  };
</script>